<h3>Total number of clients: {$ ::controller.totalClientCount $}</h3>

<h3>User CPU seconds</h3>
<dl class="dl-horizontal">
  <dt>User CPU mean</dt>
  <dd>{$ ::controller.userCpuStats.mean | number:1 $}</dd>

  <dt>User CPU stddev</dt>
  <dd>{$ ::controller.userCpuStats.stddev | number:1 $}</dd>

  <dt>Clients Histogram</dt>
  <dd class="histogram">
    <grr-comparison-chart typed-data="controller.userCpuStats"
                          preserve-order="true">
    </grr-comparison-chart>
  </dd>
</dl>

<h3>System CPU seconds</h3>
<dl class="dl-horizontal">
  <dt>System CPU mean</dt>
  <dd>{$ ::controller.systemCpuStats.mean | number:1 $}</dd>

  <dt>System CPU stddev</dt>
  <dd>{$ ::controller.systemCpuStats.stddev | number:1 $}</dd>

  <dt>Clients Histogram</dt>
  <dd class="histogram">
    <grr-comparison-chart typed-data="controller.systemCpuStats"
                          preserve-order="true">
    </grr-comparison-chart>
  </dd>
</dl>

<h3>Network bytes sent</h3>
<dl class="dl-horizontal">
  <dt>Network bytes sent mean</dt>
  <dd>{$ ::controller.networkBytesStats.mean | number:1 $}</dd>

  <dt>Network bytes sent stddev</dt>
  <dd>{$ ::controller.networkBytesStats.stddev | number:1 $}</dd>

  <dt>Clients Histogram</dt>
  <dd class="histogram">
    <grr-comparison-chart typed-data="controller.networkBytesStats"
                          preserve-order="true">
    </grr-comparison-chart>
  </dd>
</dl>

<h3>Worst performers</h3>
<table class="table table-condensed table-striped table-bordered">
  <thead>
    <th>Client Id</th>
    <th>User CPU seconds</th>
    <th>System CPU seconds</th>
    <th>Network bytes sent</th>
  </thead>
  <tbody>
    <tr ng-repeat="client in controller.stats.value.worst_performers">
      <td><grr-semantic-value value="client.value.client_id"></grr-semantic-value></td>
      <td>{$ ::client.value.cpu_usage.value.user_cpu_time.value | number:1 $}</td>
      <td>{$ ::client.value.cpu_usage.value.system_cpu_time.value | number:1 $}</td>
      <td>{$ ::client.value.network_bytes_sent.value $}</td>
    </tr>
  </tbody>
</table>
